<template>
    <el-card class="box-card">
        <el-form ref="form" :model="form" inline>
            <el-form-item prop="search">
                <el-input v-model="form.search" clearable style="width: 200px" prefix-icon="search" placeholder="输入名称" />
            </el-form-item>

            <el-form-item>
                <el-button type="success" icon="search" size="small" @click="search(form)">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" style="margin-bottom: 20px" icon="Edit" size="small"
            @click="createRole()">新增</el-button>

<el-row style="margin-bottom: 20px; ">
 <el-col :span="24">
        <el-steps :active="step" finish-status="success" simple >
          <el-step title="点击角色" />
          <el-step title="分配权限" />
          <el-step title="点击授权" />
        </el-steps>
</el-col>
</el-row>
  <el-row>

      <el-col :span="17">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
           <!--表单组件-->
          <el-table
            ref="multipleTable"
            :data="tableData"
            :row-key="getRowKeys"
            style="width: 100%"
            highlight-current-row
            @current-change="tableHandleCurrentChange"
            @selection-change="handleSelectionChange"
          >
         
            <el-table-column
              prop="name"
              label="角色"
            />
            <el-table-column
              prop="desc"
              label="描述"
            />
            <el-table-column
              prop="gmt_create"
              label="创建时间"
              width="180"
            />
            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="220"
            >
              <template #default="scope">
                <!-- <el-button v-permission="['admin','system-roles-update']" type="primary" icon="edit" size="mini" @click="updateRole(scope.row)">编辑</el-button>
                <el-button v-permission="['admin','system-roles-del']" type="danger" icon="delete" size="mini" @click="deleteRole(scope.row)">删除</el-button> -->
                 <el-button type="primary" icon="edit" size="small" @click="updateRole(scope.row)">编辑</el-button>
                 <el-button type="danger" icon="delete" size="small" @click="deleteRole(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
            <!--分页组件-->
            <el-pagination background :current-page="currentPage" :page-sizes="pagesizeList" :page-size="pagesize"
                :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card class="permissions-box-card" style="margin-left:10px">
          <div slot="header" class="clearfix">
            <span>权限分配</span>
            <!-- <el-button v-permission="['admin','system-roles-auth']" :disabled="!showButton" type="primary" style="float: right" icon="check"  size="small" @click="authorize()">授权</el-button> -->
            <el-button  :disabled="!showButton" type="primary" style="float: right" icon="check"  size="small" @click="authorize()">授权</el-button>
          </div>
          <el-tree
            ref="permissions"
            :data="permissionsData"
            :default-checked-keys="permissionIds"
            :props="defaultProps"
            check-strictly
            accordion
            show-checkbox
            node-key="id"
            @check="handleCheckClick"
          />
        </el-card>
      </el-col>
    </el-row>
 

     

        <cuForm :dialog-visible="cuDialogVisible" :cur-id="curId" @close="close" @search="search" />
    </el-card>
</template>
<script>
import cuForm from "./components/cuForm.vue";
import { deleteRole, updateRolePermissions, getRoles } from "@/api/user/roles";
import { getPermissions } from '@/api/user/permissions'
export default {
    name: "User-Role",
    components: { cuForm },
    data () {
        return {
            currentPage: 1, // 当前页面
            pagesize: 10,  // 默认每页的数据条数
            pagesizeList: [10, 20, 50, 100], // 当前分页数
            total: 0,  // 总数据条数
            form: {
                page: 1,
                size: 10,
                search: "",
                ordering: "",
            },
            tableData: [],
            isAllSelect: false,
            multipleSelection: [],
             // 权限数部分数据
            currentId: null,
            step: 0,
            showButton: false,
            permissionsData: [],
            permissionIds: [],
            defaultProps: { children: 'children', label: 'label' },
            // cuForm数据
            cuDialogVisible: false,
            curId: null,
        };
    },
    created () {
        this.search()
        this.getPermissions()
    },
    methods: {
        // 获取列表/搜索功能
        search (search) {
            if (search) {
                // 清空权限菜单部分数据
                this.showButton = false
                this.permissionIds = []
                this.$refs.permissions.setCheckedKeys([])
                this.changeDisabled(this.permissionsData, false)
                this.step = 0
                this.currentId = null
            }
            getRoles(this.form).then(res => {
                this.tableData = res.data.results
                console.log("roles tableData:", this.tableData)
                this.total = res.data.count
            })
        },
         // 获取权限数结构数据
        getPermissions () {
            getPermissions().then(res => {
                this.permissionsData = res.data.results
                console.log("permissionsData:", this.permissionsData)
            })
        },
        // tree权限节点被点击时的回调
        handleCheckClick (currentObj, treeStatus) {
            if (this.currentId) {
                this.step = 2
            }
            // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
            const selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
            // 选中
            if (selected !== -1) {
                // 子节点只要被选中父节点就被选中
                this.selectedParent(currentObj)
                // 统一处理子节点为相同的勾选状态
                this.uniteChildSame(currentObj, true)
            } else {
                // 未选中 处理子节点全部未选中
                if (currentObj.children !== undefined) {
                    if (currentObj.children.length !== 0) {
                        this.uniteChildSame(currentObj, false)
                    }
                }
            }
        },
        // 统一处理子节点为相同的勾选状态
        uniteChildSame (treeList, isSelected) {
            this.$refs.permissions.setChecked(treeList.id, isSelected)
            if (treeList.children !== undefined) {
                for (let i = 0; i < treeList.children.length; i++) {
                    this.uniteChildSame(treeList.children[i], isSelected)
                }
            }
        },
        // 统一处理父节点为选中
        selectedParent (currentObj) {
            const currentNode = this.$refs.permissions.getNode(currentObj)
            if (currentNode.parent.key !== undefined) {
                this.$refs.permissions.setChecked(currentNode.parent, true)
                this.selectedParent(currentNode.parent)
            }
        },
        // 角色授权
        authorize () {
            this.step = 3
            const permissionIds = this.$refs.permissions.getCheckedKeys()
            updateRolePermissions(this.currentId, permissionIds).then(res => {
                this.$message({
                    message: '授权成功',
                    type: 'success'
                })
                this.search()
            })
        },
        // 获取Permissions Tree的所有ID
        getAllPermissionDataId (array, datas) {
            for (const index in datas) {
                const id = datas[index].id
                array.push(id)
                if (datas[index].children) {
                    this.getAllPermissionDataId(array, datas[index].children)
                }
            }
            return array
        },
        // 更改Permissions Tree的disabled属性
        changeDisabled (data, disabled) {
            for (let index = 0; index < data.length; index++) {
                const children = data[index].children
                if (children !== undefined) {
                    this.changeDisabled(children, disabled)
                }
                data[index].disabled = disabled
            }
        },
         // table选择框功能的change事件
        handleSelectionChange () {
            const deleteIds = []
            this.$refs.multipleTable.selection.forEach(data => deleteIds.push(data.id))
            this.multipleSelection = deleteIds
        },
        // table单选触发单选
        tableHandleCurrentChange (val) {
            if (val) {
                // 清空菜单的选中
                this.$refs.permissions.setCheckedKeys([])
                if (val.name === 'admin') {
                    this.changeDisabled(this.permissionsData, true)
                    this.permissionIds = this.getAllPermissionDataId([], this.permissionsData)
                    this.showButton = false
                    this.step = 3
                } else {
                    this.changeDisabled(this.permissionsData, false)
                    // 保存当前的角色id
                    this.currentId = val.id
                    // 初始化默认选中的key
                    this.permissionIds = val.permissions.map(permission => permission.id);
                    // 显示授权按钮
                    this.showButton = true   
                    // 步骤显示
                    this.step = 1
                    // console.log('val', val);
                    // console.log('permissionsData', this.permissionsData);
                    // console.log('permissionIds', this.permissionIds);
                    // console.log('permissionIds-all',this.getAllPermissionDataId([], this.permissionsData))
                    this.$nextTick(() => {
                        this.$refs.permissions.setCheckedKeys(this.permissionIds);
                    });
                }
            }
        },
        // 重置
        resetForm () {
            this.$refs.form.resetFields();
            this.search();
        },
         getRowKeys (row) {
            return row.id
        },
        // 删除
        deleteRole (row) {
            this.$confirm('此操作将删除"' + row.name + '" , 是否继续？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteRole(row.id).then(() => {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    // 刷新table
                    this.search();
                });
            })
                .catch(() => {
                    // 空的回调函数，什么都不做
                    // 异常处理
                    console.error("取消删除操作");
                });
        },

        // cuForm子组件
        createRole () {
            this.cuDialogVisible = true;
        },
        updateRole (row) {
            this.curId = row.id;
            this.cuDialogVisible = true;
        },
        close () {
            this.cuDialogVisible = false;
            this.curId = null;
        },
        //页面大小发生变化时触发，赋值并重新获取列表
        handleSizeChange (pagesize) {
            this.pagesize = pagesize  // 重新设置分页显示
            this.form.size = pagesize // 将最新值更新到表单里
            this.search();
        },
        //页数发生变化时触发，复制并重新获取列表
        handleCurrentChange (currentPage) {
            this.currentPage = currentPage;
            this.form.page = currentPage;
            this.search();
        },
    },
};
</script>
